import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Modal, Toast, Picker, Button, List, TextareaItem,Switch,InputItem,DatePicker,Radio,Tabs,Checkbox
} from 'antd-mobile';
import Input from "../../../components/input/Input";
import { dateFormat } from "../../../model/code";
import http from "../../../model/http";
import code from "../../../model/code"; 
import Header from "./component/back";

import './index.less'

// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
const Item = List.Item

function Add() {
    const history = useHistory();
    const CheckboxItem = Checkbox.CheckboxItem;
    


    // let list1 =  require('./list').default.data
    // list1.forEach(m=>{
    //     m.children.forEach(n=>{
          
    //         n.cjValue='09010403'
    //     })
    // })

    let [list,setList] = useState([])
    let [arr,setArr] = useState([])

   //选择成交意向 
   const selectYx=(num,i) =>{
       let mylist= JSON.parse(JSON.stringify(list))
       console.log(num)
       if(num == 1){
            mylist.forEach(m=>{
                m.children.forEach(n=>{
                    if(i.value == n.value){
                        n.cjValue ='09010401'
                        
                    }
                })
            })
            setList(mylist)
       }
       if(num == 2){
            mylist.forEach(m=>{
                m.children.forEach(n=>{
                    if(i.value == n.value){
                        n.cjValue ='09010402'
                        
                    }
                })
            })
            setList(mylist)

       }
       if(num == 3){
            mylist.forEach(m=>{
                m.children.forEach(n=>{
                    if(i.value == n.value){
                        n.cjValue ='09010403'
                        
                    }
                })
            })
            setList(mylist)
       }
       if(num == 4){
            mylist.forEach(m=>{
                m.children.forEach(n=>{
                    if(i.value == n.value){
                        n.cjValue ='09010404'
                        
                    }
                })
            })
            setList(mylist)
       }
       setTimeout(()=>{
        
        let isTrueArr=[]
        mylist.forEach(k=>{
            k.children.forEach(j=>{
                 if(j.selected){
                    isTrueArr.push(j)
                 }
            })
            // setList(mylist)
        })

        setArr(isTrueArr)
        setTimeout(()=>{
            formatArr(arr)
        },20)
       },10)

      

       console.log("list",mylist)
   }
 

    //选择checkbox
    const done =(i)=>{
        list.forEach(m=>{
            m.children.forEach(n=>{
                 if(i.value == n.value){
                     n.selected =!n.selected
                 }
            })
        })
        setList(list)
 
        
        let isTrueArr=[]
        list.forEach(k=>{
            k.children.forEach(j=>{
                 if(j.selected){
                    isTrueArr.push(j)
                 }
            })
        })
        
        setArr(isTrueArr)
        setTimeout(()=>{
            formatArr(isTrueArr)
        },20)

        
       
        
    }

    const formatArr=(v)=>{
        // items":[{"is_main":1,"item_id":1,"item_name":1,"intention_level":1},{"is_main":2,"item_id":2,"item_name":2,"intention_level":2}]
        let tempArr =[]
        if(v.length >0){
            for(let i=0;i<v.length;i++){
                let obj={}
                if( i == 0){
                    obj.is_main=1
                    obj.item_id=v[i].value
                    obj.item_name=v[i].label
                    obj.deptName=v[i].deptName
                    obj.intention_level=v[i].cjValue
                }else{
                    obj.is_main=0
                    obj.item_id=v[i].value
                    obj.item_name=v[i].label
                    obj.deptName=v[i].deptName
                    obj.intention_level=v[i].cjValue
                }
                tempArr.push(obj)
            }
        }

        console.log("isTrueArr",tempArr)

        // var curTime = new Date().getTime();
		window.localStorage.setItem("tempSuqiu",JSON.stringify({data:tempArr}));

        



       

    }

    useEffect(async () => { 
        // if(window.localStorage.getItem("tempSuqiu")!='' && window.localStorage.getItem("tempSuqiu")!=undefined && window.localStorage.getItem("tempSuqiu")!=null){
            // window.localStorage.removeItem("tempSuqiu")
            let list1 =  require('./list').default.data
            list1.forEach(m=>{
                m.children.forEach(n=>{
                    n.selected=false
                    n.cjValue='09010403'
                })
            })
            setList(list1)


            // setArr([])
            
        // }
         
        



    },[])

    return (
        <div>
            <div className="v-return-visit-add">
                <div className='body-background-div'></div>
                <Tabs tabs={list}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    >
                    {
                        list.map(item=>
                         (            
                         <div style={{  backgroundColor: '#fff' }}>       
                            {/* <div>123</div> */}
 


                            { item.children.map( i=>(
                                <div style={{display: 'flex', alignItems: 'center',  justifyContent: 'left', }}>
                                    <CheckboxItem style={{ with:'100%' }} key={i.value} onChange={() => {done(i)}}>
                                          <span>
                                             {i.label}  
                                          </span>
                                          
                                          <span>
                                          {i.cjValue =='09010401'?<span>                                                
                                             <span onClick={()=>{selectYx(1,i)}}  style={{color:'rgb(70,170,239)',fontSize:'14px',marginLeft:'12px'}}>很强</span>
                                             <span onClick={()=>{selectYx(2,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>强</span>
                                             <span onClick={()=>{selectYx(3,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>一般</span>
                                             <span onClick={()=>{selectYx(4,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>弱</span>
                                           </span>:'' }

                                           {i.cjValue =='09010402'?<span>                                                
                                             <span onClick={()=>{selectYx(1,i)}}  style={{fontSize:'14px',marginLeft:'12px'}}>很强</span>
                                             <span onClick={()=>{selectYx(2,i)}} style={{color:'rgb(70,170,239)',fontSize:'14px',marginLeft:'12px'}}>强</span>
                                             <span onClick={()=>{selectYx(3,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>一般</span>
                                             <span onClick={()=>{selectYx(4,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>弱</span>
                                           </span>:'' }

                                           {i.cjValue =='09010403'?<span>                                                
                                             <span onClick={()=>{selectYx(1,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>很强</span>
                                             <span onClick={()=>{selectYx(2,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>强</span>
                                             <span onClick={()=>{selectYx(3,i)}} style={{color:'rgb(70,170,239)',fontSize:'14px',marginLeft:'12px'}}>一般</span>
                                             <span onClick={()=>{selectYx(4,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>弱</span>
                                           </span>:'' }

                                           {i.cjValue =='09010404'?<span>                                                
                                             <span onClick={()=>{selectYx(1,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>很强</span>
                                             <span onClick={()=>{selectYx(2,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>强</span>
                                             <span onClick={()=>{selectYx(3,i)}} style={{fontSize:'14px',marginLeft:'12px'}}>一般</span>
                                             <span onClick={()=>{selectYx(4,i)}} style={{color:'rgb(70,170,239)',fontSize:'14px',marginLeft:'12px'}}>弱</span>
                                           </span>:'' }

                                          </span>

                                        
                                    </CheckboxItem>
                                   
                                
                                   
                                </div>
                            ) ) }
                        </div>)
                        )
                    }
                </Tabs>
                {/* <Button style={{marginTop:'20px'}} className="add-btn" type="primary" onClick={addSave}>提交</Button> */}
            </div>
            <Header/>
        </div>
    )
}   
export default Add;